<template>
  <div class="common-wrapper">
    <div class="common-title">用工历史记录</div>
    <div class="common-main">
      <el-form
        ref="search"
        class="common-search"
        :inline="true"
        :rules="searchRules"
        :model="search"
        :show-message="false"
      >
        <el-form-item>
          <el-select
            v-model="search.org"
            placeholder="选择组织"
            size="small"
            clearable
          >
            <el-option
              v-for="(item, index) in orgOption"
              :key="index"
              :label="item['key_value']"
              :value="item['key_value']"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="search.cj"
            placeholder="选择车间"
            size="small"
            clearable
          >
            <el-option
              v-for="(item, index) in cjOption"
              :key="index"
              :label="item['key_value']"
              :value="item['key_value']"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="search.gongxu"
            placeholder="选择工序"
            size="small"
            clearable
          >
            <el-option
              v-for="(item, index) in gxOption"
              :key="index"
              :label="item['key_value']"
              :value="item['key_value']"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            size="small"
            v-model="search.time"
            placeholder="选择时间"
            type="date"
            value-format="yyyy-MM-dd"
            clearable
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="search.bc"
            placeholder="选择班次"
            size="small"
            clearable
          >
            <el-option label="班次甲" value="甲"></el-option>
            <el-option label="班次乙" value="乙"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn-list">
          <el-button type="primary" size="small" @click="getTableData"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div class="common-table" ref="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          :max-height="tableHeight"
        >
          <el-table-column
            prop="org"
            label="组织"
            min-width="15%"
            align="center"
          />
          <el-table-column
            prop="cj"
            label="车间"
            min-width="15%"
            align="center"
          />
          <el-table-column
            prop="gongxu"
            label="工序"
            min-width="15%"
            align="center"
          />
          <el-table-column
            prop="time"
            label="日期"
            min-width="20%"
            align="center"
            :formatter="dateFormatter"
          />
          <el-table-column
            prop="bc"
            label="班次"
            min-width="10%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="sjyg"
            label="实际用工"
            min-width="20%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="wdyg"
            label="万锭用工"
            min-width="20%"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="common-pagination">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :page-size="search.size"
          :current-page.sync="search.current"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getHistoricalEmployment } from '@/api/production';
export default {
  data() {
    return {
      tableHeight: 200,
      search: {
        gongxu: '',
        bc: '',
        cj: '',
        org: '',
        time: '',
        current: 1,
        size: 10
      },
      searchRules: {},
      total: 10,
      tableData: []
    };
  },
  created() {
    window.addEventListener('resize', this.getHeight);
    this.getOrg();
    this.getCj();
    this.getGx();
  },
  computed: {
    orgOption() {
      return this.$store.getters.orgOption;
    },
    cjOption() {
      return this.$store.getters.cjOption;
    },
    gxOption() {
      return this.$store.getters.gxOption;
    }
  },
  mounted() {
    document.getElementsByClassName(
      'el-pagination__jump'
    )[0].childNodes[0].nodeValue = '跳至';
    this.$nextTick(() => {
      this.getHeight();
      this.getTableData();
    });
  },
  destroyed() {
    window.removeEventListener('resize', this.getHeight);
  },
  methods: {
    async getTableData() {
      let form = Object.assign({}, this.search);
      for (let i in form) {
        if (form[i] == '') {
          delete form[i];
        }
      }
      const res = await getHistoricalEmployment(form);
      if (res.code == 1) {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }
    },
    getHeight() {
      this.tableHeight = this.$refs.table.offsetHeight;
    },
    dateFormatter(row, column, val) {
      if (val) {
        let time = val.split('T');
        return time[0];
      } else {
        return '';
      }
    },
    handleSizeChange(val) {
      this.search.current = 1;
      this.search.size = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.search.current = val;
      this.getTableData();
    }
  }
};
</script>

<style lang="stylus" scoped>
.common-wrapper{
  height 100%
}
.common-search{
  display flex
  ::v-deep .btn-list .el-form-item__content{
    display flex
  }
}
</style>
